<template>
      <li class="item">
<div class="user">
   <!-- <img src="https://p2.music.126.net/i8HIM-hLGdP0Ny3M6IFhHg==/109951164297716077.jpg?imageView=1&type=webp&thumbnail=61x0" > -->
   <img :src=item.user.avatarUrl >
   <div class="content">
     <div class="name">{{item.user.nickname}}</div>
     <div class="time">{{item.time|time}}</div>
   </div>
    <div class="like">
      <span>{{item.likedCount}}</span>
      <svg class="u-svg u-svg-unzancmt" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28 28"><path fill="#999" d="m25.857 14.752c-.015.059-1.506 5.867-2.932 8.813-1.162 2.402-3 2.436-3.099 2.436h-12.826v-13c3 0 5.728-4 5.728-7.275 0-3.725 1.433-3.725 2.142-3.725 1.327 0 1.978 1.345 1.978 4 0 2.872-.832 4.525-.839 4.537-.161.31-.155.682.027.981.181.299.5.482.849.482h6.942c.922 0 1.551.215 1.866.64.467.626.286 1.705.164 2.112m-23.857 10.248v-10c0-1.795.659-1.981.855-2h2.145v13h-2.173c-.829 0-.827-.648-.827-1m25.309-13.54c-.713-.969-1.886-1.46-3.482-1.46h-5.519c.26-.932.519-2.285.519-4 0-5.221-2.507-6-4-6-1.909 0-4.185.993-4.185 5.725 0 2.206-1.923 5.275-3.815 5.275h-4-.011c-1.034.011-2.816.862-2.816 4v10.02c0 1.198.675 2.979 2.827 2.979h16.971.035c.364 0 3.224-.113 4.894-3.564 1.514-3.127 3.01-8.942 3.056-9.14.071-.23.664-2.289-.474-3.836"></path></svg>
    </div>
</div>
     <div class="comment">{{item.content}}</div>

  </li>
</template>
<script>
export default {
  props:['item'],
  filters:{
    time(val){
      return (new Date(val).getMonth()+'月'+new Date(val).getDate()+'日'+ new Date(val).getHours()+':'+new Date(val).getMinutes())
    }
  }
}
</script>
<style lang="less" scoped>
.item{
  list-style: none;
  padding: 10px;
  display: flex;
  flex-direction: column;
  align-content: space-around;
  font-size: 14px;
  flex-wrap: wrap;
  color: #333333;
  margin:  10px 0;
  border-bottom: 1px solid #e2cccc;
  .comment{
    width: 100%;
    margin-top: 10px;
    text-indent: 1em;
  }
  .user{
    display: flex;
    justify-content: space-between;
    .content{
      flex: 1;
      .time{
        font-size: 10px;
        color: #a5a5a5;
      }
    }
  img{
    margin:  0 10px;
    display: inline-block;
    border-radius: 50%;
    width: 30px;
    height: 30px; 
  }

  .like{
    
    font-size: 14px;
    vertical-align: middle;
  color: #a5a5a5;
    svg{
      margin-left: 4px;
 
    width: 14px;
    height: 14px;
    vertical-align:baseline;
    cursor: pointer;
  }

    }
  }
}
</style>